<template>
	<view class="dt">

		<view class=".dt-label">
			时间
		</view>
		<view class="dt-input">
			<picker mode="multiSelector" :range="dateTimeArray" v-model="dateTime" @change="change"
				@columnchange="columnchange">
				<input type="text" disabled="true" v-model="upTower" placeholder="请选择时间"
					placeholder-class="inputPlace" />
			</picker>
		</view>

	</view>
</template>

<script>
	//引入事先声明的类
	import dateTimePicker from './../utils/dateTimePicker.js';

	export default {
		data() {
			return {
				// 时间选择器
				upTower: '',
				dateTimeArray: null,
				dateTime: null,
				startYear: 2000,
				endYear: 2050,
			};
		},
		created() {
			//传入开始展示年份startYear 结束展示年份endYear
			//自定义开始显示时间
			// let arr = '2018/09/01 13:00';
			let arr = this.moment(new Date().getTime());
			let obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear, arr)
			this.dateTimeArray = obj.dateTimeArray
			this.dateTime = obj.dateTime
		},
		methods: {
			//时间格式化
			withData(param) {
				return param < 10 ? '0' + param : '' + param;
			},
			change(e) {
				let value = []
				e.detail.value.forEach((val, index) => {
					value.push(this.withData(val))
				})
				let dateArray = "20" + value[0] + "-" + value[1] + "-" + value[2] + " " + value[3] + ":" + value[4]
				this.upTower = dateArray
			},
			columnchange(e) {
				let dateArr = this.dateTimeArray
				let arr = this.dateTime
				//滑动所在列的数据并对其值进行更新
				arr[e.detail.column] = e.detail.value
				//更新展示月份对应的天数（28 or 29 or 30 or 31）
				dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]])
				//最后把最新的数值赋值到dateTimeArray
				this.dateTimeArray = dateArr
				this.dateTime = arr
			},

			moment(strTime) {

				if (!strTime) {
					return
				}
				let value = 0;


				let time = new Date(strTime)
				let y = time.getFullYear();
				let m = time.getMonth() + 1
				m = m < 10 ? `0${m}` : m
				let d = time.getDate()
				d = d < 10 ? `0${d}` : d
				let hh = time.getHours()
				hh = hh < 10 ? `0${hh}` : hh
				let mm = time.getMinutes()
				mm = mm < 10 ? `0${mm}` : mm
				let ss = time.getSeconds()
				ss = ss < 10 ? `0${ss}` : ss
				return value = `${y}/${m}/${d} ${hh}:${mm}`

			},

		}
	}
</script>

<style scoped lang="scss">
	.dt {
		padding-top: 40rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		color: #333;

		.dt-label {}

		.dt-input {
			input {
				width: 100%;
				height: 72rpx;
				line-height: 72rpx;
				border: 0.5rpx solid #e9e9e9;
				border-radius: 8rpx;
				margin-top: 20rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
			}
		}
	}
</style>
